<template>
  <div class="chuyuan com_echarts" id="chuyuan">
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'chuyuan',
  data () {
    return {
        id:"chuyuan"
    }
  },
  created () {

  },
  mounted(){
      this.initMap();
  },
  methods:{
    initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
        // 值
        var valueOne = 68;
        var valueTwo = 20;
        var valueThree = 12;
        var unit = "%";
        var min = 0;
        var max = 100;
        var color = ['#774ecc','#fd905f','#7de3f6'];
        var size = '100%';
        // 控制位置
        var centerOne = ['15%', '55%'];
        var centerTwo = ['50%', '55%'];
        var centerThree = ['85%', '55%'];
        // 控制大小
        // 外圆
        var radiusCncircle = ['50%', '59%'];
        var dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
            }
        };
        var placeHolderStyle = {
            normal: {
                color: '#18346d', //未完成的圆环的颜色
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }
        };
        var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            title:{
                text: '出院量占出院总量的比例',
                left: '2%',
                top: '0',
                textStyle: {
                    align: 'center',
                    color: '#4DCEF8',
                    fontSize: 14
                }
            },
             tooltip: {
                "formatter": "{a}:{c}" + unit
            },
             graphic:[{
                type:'text',
                left:'12%',
                bottom: '0',
                style:{
                    text:'医院',
                    fill:'#fff',
                }
            },{
                type:'text',
                left:'center',
                bottom: '0',
                style:{
                    text:'乡镇卫生院',
                    fill:'#fff',
                }
            },{
                type:'text',
                left:'75%',
                bottom: '0',
                style:{
                    text:'社区卫生服务中心（站）',
                    fill:'#fff',
                }
            }],
            series: [{
                name: '医院',
                type: 'pie',
                clockWise: false,
                center:centerOne,
                radius: radiusCncircle,
                itemStyle: dataStyle,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                label:{
                    normal:{
                        show:true,
                        position:'center',
                        formatter:valueOne + unit,
                        textStyle:{
                            color:'#ffffff',
                            fontSize: 18
                        }
                    }
                },
                data: [{
                        value: valueOne - min,
                        name: '01',
                        itemStyle:{
                        normal:{
                            color:color[0]
                        }
                        }
                    }, {
                        value: max - valueOne,
                        name: 'invisible',
                        itemStyle: placeHolderStyle
                    }

                ]
            },
            {
                name: '乡镇卫生院',
                type: 'pie',
                clockWise: false,
                center:centerTwo,
                radius: radiusCncircle,
                itemStyle: dataStyle,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                label:{
                    normal:{
                        show:true,
                        position:'center',
                        formatter:valueTwo + unit,
                        textStyle:{
                            color:'#ffffff',
                            fontSize: 18
                        }
                    }
                },
                data: [{
                        value: valueTwo - min,
                        name: '01',
                        itemStyle:{
                        normal:{
                            color:color[1]
                        }
                        }
                    }, {
                        value: max - valueTwo,
                        name: 'invisible',
                        itemStyle: placeHolderStyle
                    }

                ]
            },
            {
                name: '社区卫生服务中心（站）',
                type: 'pie',
                clockWise: false,
                center:centerThree,
                radius: radiusCncircle,
                itemStyle: dataStyle,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                label:{
                    normal:{
                        show:true,
                        position:'center',
                        formatter:valueThree + unit,
                        textStyle:{
                            color:'#ffffff',
                            fontSize: 18
                        }
                    }
                },
                data: [{
                        value: valueThree - min,
                        name: '01',
                        itemStyle:{
                        normal:{
                            color:color[2]
                        }
                        }
                    }, {
                        value: max - valueThree,
                        name: 'invisible',
                        itemStyle: placeHolderStyle
                    }

                ]
            }]
        };
        myChart.setOption(option);
    },
    randomData() {
        return Math.round(Math.random()*1000);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
</style>
